<template>
    <div class="wrap">
        <ul class="list">
             <li class="item">
                <div class="label"><span>*</span>学校</div>
                <div class="value">
                    <input type="text" v-model="school" class="input right-text" placeholder="请填写">
                </div>
            </li>
            <li class="item">
                <div class="label">专业</div>
                <div class="value">
                    <input type="text" v-model="major"  class="input right-text" placeholder="请填写">
                </div>
            </li>
            <li class="item select-icon select-icon--right" @click="showEdu">
                <div class="label"><span>*</span>学历</div>
                <div class="value">
                    <div class="select-value">
                        <span class="select-default" v-if="!eduText">请选择</span>
                        <span v-else>{{eduText}}</span>
                    </div>
                </div>
            </li>
            <li class="item select-icon select-icon--right" @click="showTime('startTime')">
                <div class="label"><span>*</span>入学时间</div>
                <div class="value">
                    <div class="select-value">
                        <span class="select-default" v-if="!startTime">请选择</span>
                        <span v-else>{{startTime}}</span>
                    </div>
                </div>
            </li>
            <li class="item select-icon select-icon--right" @click="showTime('endTime')">
                <div class="label"><span>*</span>毕业时间</div>
                <div class="value">
                    <div class="select-value">
                        <span class="select-default" v-if="!endTime">请选择</span>
                        <span v-else>{{endTime}}</span>
                    </div>
                </div>
            </li>
        </ul>
        <div class="textarea-wrap">
            <div class="title">在校经历</div>
            <textarea v-model="expText" class="textarea" placeholder="请输入自己的工作经验或实习经验~"></textarea>
        </div>
        <div class="theme-btn btn" @click="submit">保存</div>
        <van-action-sheet :show="visibleEdu" @close="visibleEdu = false">
            <van-picker value-key="name" :columns="educationOptions" @cancel="showEdu" @confirm="changeEdu" :show-toolbar="true" title="选择学历"/>
        </van-action-sheet>
        <van-action-sheet :show="visibleTime" @close="visibleTime = false">
            <van-datetime-picker
                type="date"
                :value="currentDate"
                @confirm="changeTime"
                @cancel="showTime"
                :min-date="minDate"
            />
        </van-action-sheet>
    </div>
</template>
<script>
import {cutTime} from '@/utils/filters';
export default {
    data () {
        return {
            time: null,
            school: '',
            major: '',
            eduText: '',
            eduValue: null,
            expText: '',
            educationOptions: [],
            visibleEdu: false,
            visibleTime: false,
            startTime: null,
            endTime: null,
            timeType: 'startTime',
            currentDate: new Date().getTime(),
            minDate: new Date('1994-01-01').getTime(),
            id:''
        };
    },
    methods: {
        showEdu() {
            this.visibleEdu = !this.visibleEdu;
        },
        changeEdu(e) {
            this.eduText = e.target.value.name;
            this.eduValue = e.target.value.value;
            this.visibleEdu = false;
        },
        changeTime(e) {
            this[this.timeType] = cutTime(e.mp.detail);
            this.visibleTime = false;
        },
        showTime(type) {
            this.timeType = type;
            if (this[type]) {
                this.currentDate = +new Date(this[type]);
            }
            this.visibleTime = !this.visibleTime;
        },
        submit() {
            if(!this.school.trim()){
                wx.showToast({
                    title: '学校名称不能为空',
                    icon: 'none',
                    duration: 2000,
                    mask: false,
                });
                return;
            }
            if(!this.startTime){
                wx.showToast({
                    title: '入学时间不能为空',
                    icon: 'none',
                    duration: 2000,
                    mask: false,
                });
                return;
            }
            if(!this.endTime){
                wx.showToast({
                    title: '毕业时间不能为空',
                    icon: 'none',
                    duration: 2000,
                    mask: false,
                });
                return;
            }
            if (+new Date(this.startTime) - +new Date(this.endTime) >= 0) {
                wx.showToast({
                    title: '毕业时间不能小于入学时间',
                    icon: 'none',
                    duration: 2000,
                    mask: false,
                });
                return;
            }
            if(!this.eduValue){
                wx.showToast({
                    title: '学历不能为空',
                    icon: 'none',
                    duration: 2000,
                    mask: false,
                });
                return;
            }
            this.$api.addEducation({
                startedSchoolTime: this.startTime,
                graduationTime: this.endTime,
                schoolName: this.school,
                specialities: this.major,
                schoolExperience: this.expText,
                education: this.eduValue,
                id: this.id?this.id:''
            }).then(result => {
                if(result.code == 0){
                    wx.showToast({
                      title: result.msg, //提示的内容,
                      icon: 'none', //图标,
                      duration: 1500, //延迟时间,
                      mask: true, //显示透明蒙层，防止触摸穿透,
                      success: res => {
                          setTimeout(() => {
                              wx.navigateBack({
                                delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                              });
                          },1500)
                      }
                    });
                }
            })
        }

    },
    onLoad(e) {
        Object.assign(this.$data, this.$options.data());
        const disc = wx.getStorageSync("dictList");
        if(e.item){
            let item = JSON.parse(e.item);
            this.startTime = item.startedSchoolTime;
            this.endTime = item.graduationTime;
            this.school = item.schoolName;
            this.major = item.specialities;
            this.eduValue = item.education;
            this.id = item.id;
            this.expText = item.schoolExperience;
            this.eduText = disc.educations.find(i => {
                return i.value == item.education;
            }).name || '';
        }
        this.educationOptions = disc.educations;
    }
}
</script>
<style lang="scss" scoped>
.wrap {
    position: relative;
    height: 100%;
}
.list {
    border-bottom: 10px solid $grey-bg;
}
.item {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    padding: 0px 15px;
    box-sizing: border-box;
    font-size: 12px;
    border-bottom: 1px solid $grey-border-color;
}
.label {
    color: #40444C;
    span {
        color: $theme-color;
        margin-right: 5px;
    }
}
.select-default {
    color: #C1C4C9;
}
.value {
    color: $color-text;
}
.right-text {
    text-align: right;
}
.select-value {
    span {
        padding-right: 20px;
    }
}
.textarea-wrap {
    padding: 15px;
}
.title {
    line-height: 24px;
    font-size: 13px;
    color: #40444C;
}
.textarea {
    width: 100%;
    height: 167px;
    border-radius: 4px;
    border: 1px solid $grey-border-color;
    padding: 10px 15px;
    box-sizing: border-box;
}
.btn {
    position: absolute;
    bottom: 36px;
    left: 15px;
    right: 15px;
}
</style>